import React, {Component} from 'react';
import './index.css'

class Footer extends Component {
  totalDone = todos => todos.reduce((pre, cur) => pre + (cur.done ? 1 : 0), 0)
  render() {
    const {todos, checkAllTodo, clearAllTodo} = this.props
    return (
      <div className="todo-footer"
      style={{display: todos.length > 0 ? 'block': 'none'}}>
        <label>
          <input type="checkbox"
                 // defaultChecked={} 初始展示的默认值
                 checked={this.totalDone(todos) === todos.length && todos.length > 0}
                 onChange={e => checkAllTodo(e.target.checked)}/>
        </label>
        <span><span>已完成 {this.totalDone(todos)}</span> / 全部{todos.length} </span>
        <button onClick={clearAllTodo} className="btn btn-danger">清除已完成任务</button>
      </div>
    );
  }
}

export default Footer;